<template>
  <div class="example">
    <FITabs v-model="activeTab" :options="tabsOptions"></FITabs>
    <FIButton @click="goExampleInfo">跳转到详情页</FIButton>
    <FISelect placeholder="请选择工序" v-model="form.regionTest" :options="options" showSearch></FISelect>
    <!-- <FIAutoInput
      v-model="autoInputValue"
      value-key="buttonCname"
      displayKey="buttonCname"
      usePagination
      :options="listArr"
      @load-more="loadMore"
    ></FIAutoInput> -->
    <FISelect
      v-if="listArr.length"
      v-model="autoInputValue"
      valueCustom="buttonCname"
      displayKey="buttonCname"
      :props="{ value: 'buttonEname', label: 'buttonCname' }"
      usePagination
      :options="listArr"
      @load-more="loadMore"
      ><template #option="{ scope }">
        <span>{{ scope.buttonEname }}--{{ scope.buttonCname }}</span>
      </template></FISelect
    >
    <FIPanel :use-collapse="true" title="折叠面板1">
      <!-- <template #title>
        <div>折叠面板1</div>
      </template> -->
      <FIForm
        ref="ruleFormRef"
        style="max-width: 600px"
        :model="ruleForm"
        :rules="rules"
        label-width="auto"
        class="demo-ruleForm"
        :size="formSize"
        status-icon
      >
        <el-form-item label="手机号" prop="mobile">
          <el-input v-model="ruleForm.mobile" />
        </el-form-item>
        <el-form-item label="邮箱" prop="email">
          <el-input v-model="ruleForm.email" />
        </el-form-item>
        <el-form-item label="密码" prop="passwordNumberAndLetter">
          <el-input v-model="ruleForm.passwordNumberAndLetter" />
        </el-form-item>
        <el-form-item label="传真/电话" prop="fax">
          <el-input v-model="ruleForm.fax" />
        </el-form-item>
        <el-form-item label="不包含数字" prop="noNumber">
          <el-input v-model="ruleForm.noNumber" />
        </el-form-item>
        <el-form-item label="二代身份证" prop="idCard">
          <el-input v-model="ruleForm.idCard" />
        </el-form-item>
        <el-form-item label="网址" prop="url">
          <el-input v-model="ruleForm.url" />
        </el-form-item>
        <el-form-item label="整数" prop="integerValidator">
          <el-input v-model="ruleForm.integerValidator" />
        </el-form-item>
        <el-form-item label="小数" prop="decimalValidator">
          <el-input v-model="ruleForm.decimalValidator" />
        </el-form-item>
        <el-form-item label="日期">
          <FIDatePicker value-format="YYYYMMDD" v-model="ruleForm.date1"></FIDatePicker>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="submitForm(ruleFormRef)">Submit</el-button>
          <el-button @click="resetForm(ruleFormRef)">Reset</el-button>
        </el-form-item>
      </FIForm>
    </FIPanel>
    <div id="button" class="margin-top20 text-left">
      <h3>Button 按钮</h3>
      <!-- 注册按钮使用 -->
      <FIButton id="delete" />
      <!-- 默认主题色按钮使用 -->
      <FIButton type="primary">primary</FIButton>
      <!-- boder -->
      <FIButton border prefix-icon="icon-shanchu">custom</FIButton>
      <FIButton type="primary" prefix-icon="icon-shanchu">prefix-icon</FIButton>
      <FIButton suffix-icon="icon-lieshezhi">suffix-icon</FIButton>
      <FIButton style="width: 32px" iconBtnName="icon-zhongzhi"></FIButton>
      <FIButton iconBtnName="icon-lieshezhi" circle></FIButton>
      <FIButton type="primary" disabled>disabled</FIButton>
      <FIButton type="primary" loading>loading</FIButton>
      <FIButton size="large">Large</FIButton>
      <FIButton>default</FIButton>
      <FIButton size="small">small</FIButton>
    </div>
    <h3 class="margin-top20 margin-bottom10">弹窗</h3>
    <FIButton @click="handleMessge(1)">消息提示info</FIButton>
    <FIButton @click="handleMessge(2)">消息提示warning</FIButton>
    <FIButton @click="handleMessge(3)">消息提示success</FIButton>
    <FIButton @click="handleMessge(4)">消息提示error</FIButton>
    <FIPopconfirm title="您是否确认删除选中数据吗？">
      <template #reference>
        <FIButton>气泡确认框</FIButton>
      </template>
    </FIPopconfirm>
    <FIButton @click="isVisible = !isVisible">model</FIButton>
    <FIButton @click="isDrawerVisible = !isDrawerVisible">FIDrawer</FIButton>
    <FIModel v-model="isVisible" title="Model标题" draggable>model content</FIModel>
    <FIDrawer v-model="isDrawerVisible" title="抽屉标题" draggable>FIDrawer</FIDrawer>
    <div class="margin-top10">
      <FIButton border @click="handleMessge(5)">MessageBox-info</FIButton>
      <FIButton border @click="handleMessge(6)">MessageBox-warning</FIButton>
      <FIButton border @click="handleMessge(7)">MessageBox-success</FIButton>
      <FIButton border @click="handleMessge(8)">MessageBox-error</FIButton>
      <FIButton border @click="handleMessge(9)">MessageBox-confirm</FIButton>
      <FIButton border @click="handleMessge(10)">MessageBox-prompt</FIButton>
    </div>

    <div id="input" class="margin-top20 text-left">
      <h3>Input 输入框</h3>
      <div>基础input</div>
      <FIInput v-model="inputModel"></FIInput>
      <div>一键清空 (使用clearable属性即可得到一个可一键清空的输入框)</div>
      <FIInput v-model="inputModel" clearable></FIInput>
      <div>金额格式化</div>
      <FIInput v-model="inputModel" v-thousands style="width: 300px" clearable></FIInput>
      <!-- <p v-thousands>{{ inputModel }}</p> -->
      <div>文本域 ( 添加 type="textarea)</div>
      <FIInput v-model="inputModel" :rows="3" type="textarea" placeholder="Please input"></FIInput>
    </div>
    <!-- copy -->
    <div class="margin-top20 text-left">复制copy</div>
    <FIButton v-copy="'Some text to copy'">复制文本</FIButton>
    <!-- 或者绑定到data属性 -->
    <FIButton v-copy="inputModel">复制数据属性文本</FIButton>

    <div id="radio" class="margin-top20 text-left">
      <h3>Radio 单选框</h3>
      <div class="margin-top20">基础用法</div>
      <FIRadio v-model="radioModel" :options="optionsRadio" :props="{ label: 'label2', value: 'value2' }"> </FIRadio>
      <div class="margin-top20">带有边框--小代码（设置 border 属性为 true 可以渲染为带有边框的单选框）</div>
      <FIRadio v-model="radioModel" :codeOption="{ codesetCode: 'iplat.ed.projectEnv' }" border class="ml-4"></FIRadio>
      <div class="margin-top20">按钮样式（设置 type="button"）</div>
      <FIRadio v-model="radioModel" :options="optionsRadio" type="button" class="ml-4"></FIRadio>
      <div class="margin-top20">小代码 FIRadio</div>
      <FIRadio v-model="radioModel" :codeOption="{ codesetCode: 'iplat.ed.projectEnv' }" border class="ml-4"></FIRadio>
    </div>
    <div id="checkbox" class="margin-top20 text-left">
      <h3>Checkbox 复选框</h3>
      <!-- <div>基础用法</div>
      <FICheckbox value="1" label="Option 1" size="large">Option 1</FICheckbox>
      <FICheckbox value="2" label="Option 2" size="large">Option 2</FICheckbox>
      <FICheckbox value="3" label="Option 3" disabled size="large">Option 3</FICheckbox>
      <div>带有边框（设置 border 属性为 true 可以渲染为带有边框的单选框）</div>
      <FICheckbox value="1" label="Option 1" size="large" border>Option 1</FICheckbox>
      <FICheckbox value="2" label="Option 2" size="large" border>Option 2</FICheckbox>
      <FICheckbox value="3" label="Option 3" disabled size="large" border>Option 3</FICheckbox> -->
      <div>小代码</div>
      <FICheckbox v-model="checkList" :codeOption="{ codesetCode: 'iplat.ed.projectEnv' }" class="ml-4"></FICheckbox>
      <div>带有边框（设置 border 属性为 true 可以渲染为带有边框的单选框）</div>
      <FICheckbox
        v-model="checkList"
        :codeOption="{ codesetCode: 'iplat.ed.projectEnv' }"
        class="ml-4"
        border
      ></FICheckbox>

      <!-- <FICheckbox-code v-model="checkList" :codeOption="{ codesetCode: 'province' }" class="ml-4"></FICheckbox-code> -->
    </div>
    <div id="checkbox" class="margin-top20 text-left">
      <h3>Switch 开关</h3>
      <FISwitch v-model="form.switchValue" size="large" />
      <FISwitch
        class="margin-left20"
        v-model="form.switchValue"
        inline-prompt
        size="large"
        active-text="是"
        inactive-text="否"
      />
      <FISwitch
        class="margin-left20"
        v-model="form.switchValue"
        inline-prompt
        size="large"
        active-text="启用"
        inactive-text="禁用"
      />
    </div>
    <div id="checkbox" class="margin-top20">
      <h3>Time Picker 时间选择器</h3>
      <div>基础用法</div>
      <FITimePicker v-model="timeModel"></FITimePicker>
      <FITimePicker
        class="margin-left20"
        v-model="timeModelRange"
        is-range
        range-separator="~"
        start-placeholder="Start time"
        end-placeholder="End time"
      />
    </div>
    <div id="select" class="margin-top20">
      <h3>图标 选择器</h3>
      <!-- <FIIconInput></FIIconInput> -->
      <h3>input 搜索选择框</h3>
      <!-- <FIAutocomplete queryKey="buttonEname" value-key="buttonCname" :valueKeyArr="['buttonEname']">
        <template #default="{ item }">
          <div>{{ item['buttonEname'] }}--{{ item['buttonCname'] }}</div>
        </template>
      </FIAutocomplete> -->
      <!-- <div>基础用法</div> -->
      <h3>Select 选择器</h3>
      <FISelect
        placeholder="请选择工序"
        v-model="form.region"
        v-model:key-word="keyWord"
        :codeOption="{ codesetCode: 'iplat.ed.projectEnv' }"
        multiple
        showSearch
      ></FISelect>
      <FISelect
        placeholder="请选择工序"
        v-model="form.region"
        v-model:key-word="keyWord"
        :options="options"
        multiple
        showSearch
      ></FISelect>
    </div>
    <div id="select" class="margin-top20">
      <h3>Form 格式化，校验</h3>
      <FIForm
        ref="ruleFormRef"
        style="max-width: 600px"
        :model="ruleForm"
        :rules="rules"
        label-width="auto"
        class="demo-ruleForm"
        :size="formSize"
        status-icon
      >
        <el-form-item label="手机号" prop="mobile">
          <el-input v-model="ruleForm.mobile" />
        </el-form-item>
        <el-form-item label="邮箱" prop="email">
          <el-input v-model="ruleForm.email" />
        </el-form-item>
        <el-form-item label="密码" prop="passwordNumberAndLetter">
          <el-input v-model="ruleForm.passwordNumberAndLetter" />
        </el-form-item>
        <el-form-item label="传真/电话" prop="fax">
          <el-input v-model="ruleForm.fax" />
        </el-form-item>
        <el-form-item label="不包含数字" prop="noNumber">
          <el-input v-model="ruleForm.noNumber" />
        </el-form-item>
        <el-form-item label="二代身份证" prop="idCard">
          <el-input v-model="ruleForm.idCard" />
        </el-form-item>
        <el-form-item label="网址" prop="url">
          <el-input v-model="ruleForm.url" />
        </el-form-item>
        <el-form-item label="整数" prop="integerValidator">
          <el-input v-model="ruleForm.integerValidator" />
        </el-form-item>
        <el-form-item label="小数" prop="decimalValidator">
          <el-input v-model="ruleForm.decimalValidator" />
        </el-form-item>
        <el-form-item label="日期">
          <FIDatePicker value-format="YYYYMMDD" v-model="ruleForm.date1"></FIDatePicker>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="submitForm(ruleFormRef)">Submit</el-button>
          <el-button @click="resetForm(ruleFormRef)">Reset</el-button>
        </el-form-item>
      </FIForm>
    </div>
    <div class="margin-top20">
      <h3>面板</h3>
      <FIPanel :use-collapse="true">
        <template #title>
          <div>折叠面板1</div>
        </template>
      </FIPanel>
      <!-- <TModuleForm isShowHeader ref="sourceForm" :formOpts="formOpts"></TModuleForm> -->
    </div>
  </div>
</template>

<script setup lang="ts">
import { onMounted, ref, reactive, watch } from 'vue'
import FIButton from '@/components/FIButton.vue'
import FIInput from '@/components/FIInput.vue'
import FIAutocomplete from '@/components/FIAutocomplete.vue'
import FIAutoInput from '@/components/FIAutoInput.vue'
import FITabs from '@/components/FITabs.vue'
import FIRadio from '@/components/FIRadio/index.vue'
import FICheckbox from '@/components/FICheckbox/index.vue'
import FIModel from '@/components/FIModel.vue'
import FITimePicker from '@/components/FITimePicker.vue'
import FISelect from '@/components/FISelect/index.vue'
import FIDatePicker from '@/components/FIDatePicker.vue'
import FISwitch from '@/components/FISwitch.vue'
import FIDrawer from '@/components/FIDrawer.vue'
import FIForm from '@/components/FIForm.vue'
import { useMessage, useMessageBox } from '@/hooks/message'
import FIPopconfirm from '@/components/FIPopconfirm.vue'
import FIPanel from '@/components/FIPanel.vue'
import TForm from '@/components/form/index.vue'
import TModuleForm from '@/components/module-form/index.vue'
import FIIconInput from '@/components/FIIconInput.vue'
import { apiRequestPost } from '@/api/globalApi.js'
import { useRouter } from 'vue-router'

import { debounce } from '@/utils/common'
import data from './data.json'
import data1 from './data1.json'
// import anchorLocale from '../../.vitepress/i18n/component/anchor.json'
// import { useLang } from '~/composables/lang'

// const lang = useLang()
// const locale = computed(() => anchorLocale[lang.value])
import type { FormInstance, FormRules } from 'element-plus'
import {
  mobileValidator,
  emailValidator,
  passwordNumberAndLetterValidator,
  faxValidator,
  noNumberValidator,
  validateSecIdCard,
  regexValidator,
  urlValidator,
  integerValidator,
  decimalValidator,
} from '@/utils/validate'
import routes from '@/router'
const activeTab = ref('buttonMaint')
const tabsOptions = [
  {
    name: '/cfg/buttonMaint',
    label: '按钮维护',
    to: "{ path: '/cfg/buttonMaint' }",
  },
  {
    name: '/cfg/pageMaint',
    label: '页面维护',
    to: "{ path: '/cfg/pageMaint' }",
  },
]
const isVisible = ref(false)
const isDrawerVisible = ref(false)
const query = reactive({
  formEname: '',
  buttonEname: '',
  projectEname: '',
  moduleEname1: '',
  isAuth: '',
  current: 0,
  size: 10,
})
const loadMoreEnd = ref(false)
const autoInputValue = ref('')
const router = useRouter()
const goExampleInfo = () => {
  router.push({
    name: 'exampleInfo',
    params: {
      id: '1',
    },
  })
}
const listArr = ref([])
const loadMore = () => {
  console.log('------------------000002')
  if (loadMoreEnd.value && query.current > 1) return
  query.current++
  apiRequestPost('/rm2/buttonMaint/query', query)
    .then((res) => {
      // isTableLoading.value = false
      console.log('------------------000002', res.data)
      if (res.data.success) {
        // listArr = res.data.data.result
        // if (res.data.success) {
        // // 优化：检查新数据是否与已有数据不同，避免重复添加
        // const newData = res.data.data.result.filter(
        //   (item) => !listArr.some((existingItem) => existingItem.id === item.id)
        // )
        listArr.value = [...listArr.value, ...res.data.data.result]
        if (query.current * query.size >= res.data.data.count) {
          loadMoreEnd.value = true
        }
        console.log('------------------000001', listArr)
        // autocompleteRef.value.$data.suggestions = listArr

        // pageConfig.pageSize = Number(res.data.data.size)
        // pageConfig.total = Number(res.data.data.count)
        // }
      }
    })
    .catch((error: any) => {
      // isTableLoading.value = false
      // 处理错误
    })
}
const autocompleteArr = [
  { value: 'vue', link: 'https://github.com/vuejs/vue' },
  { value: 'element', link: 'https://github.com/ElemeFE/element' },
  { value: 'cooking', link: 'https://github.com/ElemeFE/cooking' },
  { value: 'mint-ui', link: 'https://github.com/ElemeFE/mint-ui' },
  { value: 'vuex', link: 'https://github.com/vuejs/vuex' },
  { value: 'vue-router', link: 'https://github.com/vuejs/vue-router' },
  { value: 'babel', link: 'https://github.com/babel/babel' },
]
const formOpts: any = reactive({
  goodsInformation: {
    title: '货品信息',
    name: 'goodsInformation',
    ref: null,
    opts: {
      labelPosition: 'top',
      formData: {
        id: `${Math.floor(Math.random() * 10 + 1)}`, // *唯一ID
        account: null, // *用户账号
        password: null, // *用户密码
        name: null, // *用户昵称
        sex: null, // *性别: 0:男 1:女
        hobby: [], // *爱好: 0:男 1:女
        accountType: null, // *用户类型: 0: 手机注册 1: 论坛注册 2: 管理平台添加
        status: null, // *状态: 0：停用，1：启用(默认为1)',
      },
      fieldList: [
        {
          label: '账号',
          value: 'account',
          type: 'input',
          comp: 'el-input',
          event: 'account',
        },
        {
          label: '密码',
          value: 'password',
          type: 'password',
          comp: 'el-input',
        },
        { label: '昵称', value: 'name', type: 'input', comp: 'el-input' },
        {
          label: '性别',
          value: 'sex',
          type: 'select-arr',
          comp: 'el-select',
          list: 'sexList',
          bind: { disabled: false },
          arrLabel: 'key',
          arrKey: 'value',
        },
        {
          label: '平台用户',
          value: 'accountType',
          type: 'select-obj',
          comp: 'el-select',
          list: 'accountTypeList',
        },
        {
          label: '状态',
          value: 'status',
          type: 'select-arr',
          list: 'statusList',
          comp: 'el-select',
          arrLabel: 'key',
          arrKey: 'value',
        },
        {
          label: '爱好',
          value: 'hobby',
          type: 'checkbox',
          comp: 'el-checkbox-group',
          list: 'hobbyList',
          event: 'checkbox',
          widthSize: 1,
        },
      ],
      rules: {
        account: [
          { required: true, message: '请输入账号', trigger: 'blur' },
          { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' },
        ],
        password: [{ required: true, message: '请输入密码', trigger: 'blur' }],
        name: [{ required: true, message: '请输入昵称', trigger: 'blur' }],
        sex: [{ required: true, message: '请选择性别', trigger: 'change' }],
        status: [{ required: true, message: '请选择状态', trigger: 'change' }],
        accountType: [{ required: true, message: '请选择平台用户', trigger: 'change' }],
        hobby: [
          {
            type: 'array',
            required: true,
            message: '请至少选择一个爱好',
            trigger: 'change',
          },
        ],
      },
      // 相关列表
      listTypeInfo: {
        hobbyList: [
          { label: '吉他', value: '0' },
          { label: '看书', value: '1' },
          { label: '美剧', value: '2' },
          { label: '旅游', value: '3' },
          { label: '音乐', value: '4' },
        ],
        sexList: [
          { key: '女', value: 1 },
          { key: '男', value: 0 },
        ],
        accountTypeList: {
          0: '手机用户',
          1: '论坛用户',
          2: '平台用户',
        },
        statusList: [
          { key: '启用', value: 1 },
          { key: '停用', value: 0 },
        ],
      },
    },
  },
  freight: {
    title: '运费信息',
    name: 'freight',
    opts: {
      formData: {
        phone: null, // 手机号码
        createDate: null, // 创建时间
        valDate: null, // el日期选择范围
        wechat: null, // 微信
        qq: null, // qq
        email: null, // 邮箱
        desc: null, // 描述
        number: 2, // 计算器
      },
      fieldList: [
        {
          label: '手机号码',
          value: 'phone',
          type: 'input',
          comp: 'el-input',
          bind: { maxlength: 11 },
        },
        {
          label: '创建时间',
          value: 'createDate',
          type: 'year',
          bind: { valueFormat: 'YYYY' },
          comp: 'el-date-picker',
        },
        {
          label: 'element日期',
          value: 'valDate',
          type: 'daterange',
          comp: 'el-date-picker',
          bind: {
            rangeSeparator: '-',
            startPlaceholder: '开始日期',
            endPlaceholder: '结束日期',
            valueFormat: 'YYYY-MM-DD',
          },
        },
        { label: '微信', value: 'wechat', type: 'input', comp: 'el-input' },
        { label: 'QQ', value: 'qq', type: 'input', comp: 'el-input' },
        { label: '邮箱', value: 'email', type: 'input', comp: 'el-input' },
        {
          label: '计数器',
          value: 'number',
          type: 'inputNumber',
          bind: { controls: false, min: 2, max: 99 },
          comp: 'el-input-number',
        },
        {
          label: '描述',
          value: 'desc',
          type: 'textarea',
          comp: 'el-input',
          widthSize: 1,
        },
      ],
      rules: {
        phone: [{ required: true, message: '请输入手机号码', trigger: 'blur' }],
        createDate: [{ required: true, message: '请选择创建时间', trigger: 'change' }],
        valDate: [{ required: true, message: '请选择element日期', trigger: 'change' }],
        wechat: [{ required: true, message: '请输入微信', trigger: 'blur' }],
        email: [{ required: true, message: '请输入邮箱', trigger: 'blur' }],
        qq: [{ required: true, message: '请输入QQ', trigger: 'blur' }],
      },
    },
  },
})
interface RuleForm {
  mobile: string
  email: string
  passwordNumberAndLetter: string
  fax: string
  noNumber: string
  idCard: string
  regexValidator: string
  url: string
  integerValidator: number
  decimalValidator: string
  date1: string
}
const handleMessge = (type) => {
  if (type == 1) {
    useMessage().info('消息提示')
  } else if (type == 2) {
    useMessage().warning('消息提示')
  } else if (type == 3) {
    useMessage().success('消息提示')
  } else if (type == 4) {
    useMessage().error('消息提示')
  } else if (type == 5) {
    useMessageBox().info('MessageBox')
  } else if (type == 6) {
    useMessageBox().warning('MessageBox')
  } else if (type == 7) {
    useMessageBox().success('MessageBox')
  } else if (type == 8) {
    useMessageBox().error('MessageBox')
  } else if (type == 9) {
    useMessageBox().confirm('MessageBox')
  } else if (type == 10) {
    useMessageBox().prompt('MessageBox')
  }
}
const formSize = ref('default')
const ruleFormRef = ref<FormInstance>()
const ruleForm = reactive<RuleForm>({
  mobile: '',
  email: '',
  passwordNumberAndLetter: '',
  fax: '',
  noNumber: '',
  idCard: '',
  regexValidator: '',
  url: '',
  integerValidator: 0,
  decimalValidator: '',
  date1: '',
})

const rules = reactive<FormRules<RuleForm>>({
  mobile: [{ validator: mobileValidator, required: true, trigger: 'blur' }],
  email: [{ validator: emailValidator, required: true, trigger: 'blur' }],
  passwordNumberAndLetter: [{ validator: passwordNumberAndLetterValidator, required: true, trigger: 'blur' }],
  fax: [{ validator: faxValidator, required: true, trigger: 'blur' }],
  noNumber: [{ validator: noNumberValidator, required: true, trigger: 'blur' }],
  idCard: [{ validator: validateSecIdCard, required: true, trigger: 'blur' }],
  regexValidator: [{ validator: regexValidator, required: true, trigger: 'blur' }],
  url: [{ validator: urlValidator, required: true, trigger: 'blur' }],
  integerValidator: [{ validator: integerValidator, required: true, trigger: 'blur' }],
  decimalValidator: [{ validator: decimalValidator, required: true, trigger: 'blur' }],
})

const submitForm = async (formEl: FormInstance | undefined) => {
  if (!formEl) return
  await formEl.formRef.validate((valid, fields) => {
    if (valid) {
    } else {
    }
  })
}

const resetForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return
  formEl.formRef.resetFields()
}
const optionsRadio = ref([
  { label: 'Option 1', value: '1', label2: 'Option 1-1', value2: '1-1' },
  { label: 'Option 2', value: '2', label2: 'Option 2-1', value2: '2-1' },
  { label: 'Option 3', value: '3', label2: 'Option 3-1', value2: '3-1' },
])
const options = Array.from({ length: 30 }).map((_, idx) => ({
  value: `${idx + 1}`,
  label: `${idx + 1}`,
}))
const inputModel = ref('')
const radioModel = ref('')
const checkList = ref([])
const timeModel = ref('')
const timeModelRange = ref<[Date, Date]>([new Date(2016, 9, 10, 8, 40), new Date(2016, 9, 10, 9, 40)])
const keyWord = ref()
const form = reactive({
  name: '',
  region: '',
  regionTest: '',
  date1: '',
  date2: '',
  delivery: false,
  type: [],
  resource: '',
  desc: '',
  switchValue: true,
})
const paginationOption = ref({
  pageSize: 6, // 每页显示条数
  currentPage: 1, // 当前页
  pagerCount: 7, // 按钮数，超过时会折叠
  total: 0, // 总条数
})
const stepList = ref([])

onMounted(() => {
  getList({ pageNum: 1, keyWord: '' })
  loadMore()
})

const getList = debounce(async (params) => {
  let res
  if (params.pageNum === 1) {
    res = await data
  } else {
    res = await data1
  }
  if (res.success) {
    stepList.value = res.data.records
    paginationOption.value.total = res.data.total
  }
}, 500)

watch(keyWord, (newVal, oldVal) => {
  paginationOption.value.currentPage = 1
  getList({ pageNum: 1, keyWord: newVal })
})

// 切换分页
const currentChange = (pageNum: any) => {
  getList({ pageNum, keyWord: keyWord.value })
}
const handleChange = (href: string) => {}
</script>
<style lang="less" scoped>
.example {
  padding: 20px;
  background: #fff;
  text-align: left;
  h3 {
    font-weight: bold;
  }
}
</style>
